<template>
  <div class="ucenter-content">
    <div class="title">{{ name }}</div>
    <ChartCard :title="'本月成本分析'">
      <template #chart>
        <div class="chart">
          <div class="c1">
            <MiniChartCard :title="'总成本'">
              <template #chart>
                <LineStackEcharts
                  :data="totalCostData"
                  :color-list="totalCostColor"
                  :type-list="cloudTypeList"
                ></LineStackEcharts>
              </template>
            </MiniChartCard>
          </div>
          <div class="c1">
            <MiniChartCard :title="'云成本'" style="position: relative">
              <template #chart>
                <div class="type-select">
                  <el-select v-model="curCloudType" :placeholder="'请选择'">
                    <el-option :value="'多云'" :label="'多云'"></el-option>
                    <el-option v-for="item of cloudTypeList" :key="item.value" :value="item.value" :label="item.name"></el-option>
                  </el-select>
                </div>
                <CostTopology :name="curCloudTypeName" :type-list="typeList"></CostTopology>
              </template>
            </MiniChartCard>
          </div>
          <div class="c3">
            <MiniChartCard :title="'项目计量'" style="position: relative">
              <template #chart>
                <div class="type-select">
                  <el-select v-model="curTypeP" :placeholder="'请选择'">
                    <el-option
                      v-for="item of typeList"
                      :key="item.value"
                      :value="item.value"
                      :label="item.name + '（' + item.unit + '）'"
                    ></el-option>
                  </el-select>
                </div>
                <div style="width: 100%; height: 100%; overflow-y: auto">
                  <div :style="getLowHeight('p')">
                    <BarEchartsHorizontal
                      :key="new Date().getTime()"
                      :data="projectMeasureData[curTypeP]"
                      :color-list="['#29D3DAFF']"
                      :unit="curTypePItem?.unit"
                    ></BarEchartsHorizontal>
                  </div>
                </div>
              </template>
            </MiniChartCard>
          </div>
          <div class="c4">
            <MiniChartCard :title="'项目成本'">
              <template #chart>
                <div class="c4-1">
                  <BarEchartsSingle
                    :data="projectCostData"
                    :color-list="['#1F8CF2FF']"
                    :unit="'元'"
                    @click-bar="getProjectCostDetail"
                  ></BarEchartsSingle>
                  <PieEcharts3
                    :name="choicePCostDetail.name"
                    :data="choicePCostDetail.detail"
                    :color-list="costColor"
                  ></PieEcharts3>
                </div>
              </template>
            </MiniChartCard>
          </div>
          <div class="c3">
            <MiniChartCard :title="'资源域计量'" style="position: relative">
              <template #chart>
                <div class="type-select">
                  <el-select v-model="curTypeR" :placeholder="'请选择'">
                    <el-option
                      v-for="item of typeList"
                      :key="item.value"
                      :value="item.value"
                      :label="item.name + '（' + item.unit + '）'"
                    ></el-option>
                  </el-select>
                </div>
                <div style="width: 100%; height: 100%; overflow-y: auto">
                  <div :style="getLowHeight('r')">
                    <BarEchartsHorizontal
                      :key="new Date().getTime()"
                      :data="resourceMeasureData[curTypeR]"
                      :color-list="['#29D3DAFF']"
                      :unit="curTypeRItem?.unit"
                    ></BarEchartsHorizontal>
                  </div>
                </div>
              </template>
            </MiniChartCard>
          </div>
          <div class="c4">
            <MiniChartCard :title="'资源域成本'">
              <template #chart>
                <div class="c4-1">
                  <BarEchartsSingle
                    :data="resourceCostData"
                    :color-list="['#1F8CF2FF']"
                    :unit="'元'"
                    @click-bar="getResourceCostDetail"
                  ></BarEchartsSingle>
                  <PieEcharts3
                    :name="choiceRCostDetail.name"
                    :data="choiceRCostDetail.detail"
                    :color-list="costColor"
                  ></PieEcharts3>
                </div>
              </template>
            </MiniChartCard>
          </div>
        </div>
      </template>
    </ChartCard>
  </div>
</template>

<script setup lang="ts" name="System">
import { ref, reactive, computed } from "vue";
import ChartCard from "../component/chartCard.vue";
import MiniChartCard from "../component/minChartCard.vue";
import LineStackEcharts from "../component/lineStackEcharts.vue";
import PieEcharts3 from "../component/pieEcharts.vue";
import BarEchartsSingle from "../component/barEchartsSingle.vue";
import BarEchartsHorizontal from "../component/barEchartsHorizontal.vue";
import CostTopology from "../component/costTopology.vue";

export interface Props {
  name: string;
}
withDefaults(defineProps<Props>(), {
  name: ""
});
const curCloudType = ref("多云");
const cloudTypeList = reactive([
  { name: "华三云", value: "h3c" },
  { name: "华为", value: "huawei" },
  { name: "智控", value: "zhikong" }
]);
const curCloudTypeName = computed(() =>
  curCloudType.value === "多云" ? "多云" : cloudTypeList!.find(a => a.value === curCloudType.value)!.name
);

const totalCostData = ref([
  {
    name: "11月1日",
    h3c: 2000,
    huawei: 1500,
    zhikong: 3000
  },
  {
    name: "11月2日",
    h3c: 2500,
    huawei: 2000,
    zhikong: 2500
  },
  {
    name: "11月3日",
    h3c: 2800,
    huawei: 2100,
    zhikong: 2300
  },
  {
    name: "11月4日",
    h3c: 3000,
    huawei: 3500,
    zhikong: 4000
  },
  {
    name: "11月5日",
    h3c: 1000,
    huawei: 3500,
    zhikong: 3000
  },
  {
    name: "11月6日",
    h3c: 1200,
    huawei: 1300,
    zhikong: 1500
  }
]);
const totalCostColor = reactive(["#29D3DAFF", "#1F8CF2FF", "#FF8F1FFF"]);

const typeList = reactive([
  { name: "云主机CPU", value: "cpu", unit: "核*小时" },
  { name: "云主机内存", value: "memory", unit: "GB*小时" },
  { name: "云硬盘", value: "storage", unit: "GB*小时" },
  { name: "快照", value: "snapshot", unit: "GB*小时" }
]);
const curTypeP = ref("cpu");
const curTypePItem = computed(() => typeList.find(a => a.value === curTypeP.value));
const curTypeR = ref("cpu");
const curTypeRItem = computed(() => typeList.find(a => a.value === curTypeR.value));
// 项目计量
const projectMeasureData = ref({
  cpu: [
    { name: "项目1", value: 50 },
    { name: "项目2", value: 47 },
    { name: "项目3", value: 40 },
    { name: "项目4", value: 30 },
    { name: "项目5", value: 20 },
    { name: "项目6", value: 15 },
    { name: "项目7", value: 14 },
    { name: "项目8", value: 13 },
    { name: "项目9", value: 12 },
    { name: "项目10", value: 11 },
    { name: "项目11", value: 10 },
    { name: "项目12", value: 9 }
  ],
  memory: [
    { name: "项目1", value: 50 },
    { name: "项目2", value: 47 },
    { name: "项目3", value: 40 },
    { name: "项目4", value: 30 }
  ]
});
// 资源域计量
const resourceMeasureData = ref({
  cpu: [
    { name: "项目1", value: 50 },
    { name: "项目2", value: 47 },
    { name: "项目3", value: 40 },
    { name: "项目4", value: 30 },
    { name: "项目5", value: 20 },
    { name: "项目6", value: 15 },
    { name: "项目7", value: 14 },
    { name: "项目8", value: 13 },
    { name: "项目9", value: 12 },
    { name: "项目10", value: 11 },
    { name: "项目11", value: 10 },
    { name: "项目12", value: 9 }
  ]
});
const getLowHeight = type => {
  const data = type === "p" ? projectMeasureData.value[curTypeP.value] : resourceMeasureData.value[curTypeR.value];
  return {
    height: data && data.length > 6 ? data.length * 40 + "px" : "100%"
  };
};
// 项目成本
const projectCostData = ref([
  {
    name: "项目1",
    value: 101,
    detail: [
      { name: "云主机", value: 15 },
      { name: "云硬盘", value: 26 },
      { name: "快照", value: 60 }
    ]
  },
  {
    name: "项目2",
    value: 45,
    detail: [
      { name: "云主机", value: 25 },
      { name: "云硬盘", value: 20 },
      { name: "快照", value: 50 }
    ]
  },
  {
    name: "项目3",
    value: 115,
    detail: [
      { name: "云主机", value: 35 },
      { name: "云硬盘", value: 20 },
      { name: "快照", value: 60 }
    ]
  },
  {
    name: "项目4",
    value: 115,
    detail: [
      { name: "云主机", value: 15 },
      { name: "云硬盘", value: 20 },
      { name: "快照", value: 80 }
    ]
  },
  {
    name: "项目5",
    value: 87,
    detail: [
      { name: "云主机", value: 17 },
      { name: "云硬盘", value: 30 },
      { name: "快照", value: 40 }
    ]
  }
]);
const costColor = ref(["#86C25A", "#29D3DAFF", "#1F8CF2FF"]);
const choicePCostDetail = ref<any>(projectCostData.value[0]);
const getProjectCostDetail = name => {
  choicePCostDetail.value = projectCostData.value.find(a => a.name === name);
};
// 资源域成本
const resourceCostData = ref([
  {
    name: "项目1",
    value: 91,
    detail: [
      { name: "云主机", value: 15 },
      { name: "云硬盘", value: 21 },
      { name: "快照", value: 55 }
    ]
  },
  {
    name: "项目2",
    value: 110,
    detail: [
      { name: "云主机", value: 10 },
      { name: "云硬盘", value: 20 },
      { name: "快照", value: 80 }
    ]
  },
  {
    name: "项目3",
    value: 120,
    detail: [
      { name: "云主机", value: 31 },
      { name: "云硬盘", value: 23 },
      { name: "快照", value: 61 }
    ]
  },
  {
    name: "项目4",
    value: 50,
    detail: [
      { name: "云主机", value: 21 },
      { name: "云硬盘", value: 22 },
      { name: "快照", value: 52 }
    ]
  },
  {
    name: "项目5",
    value: 80,
    detail: [
      { name: "云主机", value: 15 },
      { name: "云硬盘", value: 30 },
      { name: "快照", value: 35 }
    ]
  }
]);
const choiceRCostDetail = ref<any>(resourceCostData.value[0]);
const getResourceCostDetail = name => {
  choiceRCostDetail.value = resourceCostData.value.find(a => a.name === name);
};
</script>

<style scoped lang="scss">
@import "../common.scss";
.ucenter-content {
  .type-select {
    position: absolute;
    top: 16px;
    right: 24px;
    width: 200px;
  }
  .c1 {
    flex: 1;
    min-width: 800px;
    height: 400px;
  }
  .c3 {
    flex: 1;
    min-width: 500px;
    height: 300px;
  }
  .c4 {
    flex: 2;
    min-width: 800px;
    height: 300px;
    .c4-1 {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 16px;
      height: 100%;
    }
  }
}
</style>
